<template>
  <div class="home">
    <van-nav-bar
        title="订单记录"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
    />

    <van-tabs color="#31a1f9">
      <van-tab title="未支付">
        <van-panel class="mt10" title="2019-04公积金订单" desc="订单编号：20190405324234234" status="待支付">
          <div>
            <van-cell title="办理城市" value="济南" />
            <van-cell title="应付金额" value="1910" />
          </div>
          <div slot="footer" class="fr">
            <van-button size="small" type="info">支付</van-button>
          </div>
        </van-panel>
        <van-panel class="mt10" title="2019-04公积金订单" desc="订单编号：20190405324234234" status="待支付">
          <div>
            <van-cell title="办理城市" value="济南" />
            <van-cell title="应付金额" value="1910" />
          </div>
          <div slot="footer" class="fr">
            <van-button size="small" type="info">支付</van-button>
          </div>
        </van-panel>
      </van-tab>
      <van-tab title="已支付">
        <van-panel class="mt10" title="2019-04公积金订单" desc="订单编号：20190405324234234" status="已支付">
          <div>
            <van-cell title="办理城市" value="济南" />
            <van-cell title="应付金额" value="1910" />
          </div>
        </van-panel>
        <van-panel class="mt10" title="2019-04公积金订单" desc="订单编号：20190405324234234" status="已支付">
          <div>
            <van-cell title="办理城市" value="济南" />
            <van-cell title="应付金额" value="1910" />
          </div>
        </van-panel>
      </van-tab>
    </van-tabs>


  </div>
</template>

<script>
import { Cell, NavBar, Button, Tabs, Tab, Panel } from "vant";
export default {
  name: "pay",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  components: {
    "van-cell": Cell,
    "van-nav-bar": NavBar,
    "van-button": Button,
    "van-tabs": Tabs,
    "van-tab": Tab,
    "van-panel": Panel,
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {

    }
  }
};
</script>

<style scoped>
  .mt10{margin-top:10px}
  .fr{text-align: right}
  .home{background-color: #FAFAFA;}
  .avatar{width:80px;height: 80px;margin:2em auto;}
  .avatar img{width:100%;height: 100%;border-radius: 50%;}
</style>